Mobile - Table of contents

To the main book page.

Buy it here Cover of the Mobile Web Handbook

The Mobile Web Handbook by Peter-Paul Koch. Published by Smashing Magazine GmbH.
ISBN 978-3-94454093-1

Author
Peter-Paul Koch
Design and illustrations
Stephen Hay
General editor
Vitaly Friedman
Technical editor
Stephanie Rieger
Copy editor
Owen Gregory
Further editing
Patrick Lauke, Max Firtman, Vasilis van Gemert
Production
Markus Seyfferth

This section contains my official mobile pages. They treat various aspects of mobile web development.

My mobile test directory contains many more tests and draft pages, but once a draft is officially released it ends up here.

General
Mobile blog posts Blog posts about various mobile topics.
Touch events
Touch action compatibility table What happens when the user touches a screen of a touchscreen? Concentrates on the events.
Preventing the default When returning false from an event handler, or calling preventDefault(), the action’s default (scrolling, following a link, etc.) should be prevented. Does this actually happen?
Click delay Browsers delay for about 300ms before firing a click event when you touch the screen. This behaviour can be cancelled — in some browsers, in some ways.
The three viewports
Overview A quick overview table of the various viewport concepts. Sacrifices detail for broad view.
A tale of two viewports — 1 In order to understand the viewport issue it’s best to start with desktop browsers and learn how everything works there.
A tale of two viewports — 2 Once you’ve understood the desktop browsers you can continue with the more complicated state of affairs on mobile browsers.
Viewports visualisation app Play around to figure out how the viewports actually work.
Viewport compatibility table How to read out various interesting widths and heights. Media queries and meta viewport. Mouse coordinates.
Viewport tests Tests of the <meta viewport> tag. Introduces the third viewport.
Devices and their ideal viewport
Other
Resize The resize event on mobile.

Compatibility

My most important conclusions.

Property pair Opera Mobile Safari Android 2 Android 3/4 Chrome Dolphin BlackBerry Symbian Tizen Palm MeeGo UC QQ Firefox IE9 IE10
Presto WebKit Gecko Trident
Visual viewport size
 Yes Yes No Yes No Yes Alternative Yes No No Yes

The size in CSS pixels of the visual viewport is by far the most important bit of data in the viewport properties. It’s found in window.innerWidth/Height.

  • UC hides the visual viewport dimensions in window.outerWidth/Height.
Other viewport properties
 Almost Almost Yes Almost Yes Minimal Yes Yes Minimal Almost

Screen size, layout viewport size, HTML element size, and viewport offset. Four points to be assigned:

  1. 4 points: Yes
  2. 3 points: Almost
  3. 2 points: Incomplete
  4. 1 points: Minimal

Compatibility - old

My most important conclusions from 2010 and 2011.

Property Opera Mobile Opera Mini iPhone Android Symbian S40 Dolfin BlackBerry Palm Phantom Obigo Bolt Firefox MicroB IE Mobile BlackBerry old NetFront Obigo UCWeb
Presto WebKit Gecko
Touch events
 10.1b n/a Yes No Yes No Yes No n/a No No n/a

Touchstart, touchmove, touchend.

  • Opera 10.1b (not before) supports the touch events. Only available for Android.
Other events

when you perform a touch action

 Incomplete n/a Incomplete Almost Incomplete To be tested Almost To be tested To be tested To be tested To be tested n/a Incomplete Almost Almost Minimal To be tested n/a

Interface and legacy events. The latter are generally well supported, the former aren’t.
Media queries
 Yes Yes Yes No 
@media all and (max-width: 400px) {
	// styles assigned when width is smaller than 400px;
}

A Yes here means that the browser gets its dimension information from the correct JavaScript properties. Unfortunately those properties may contain false information.
Meta viewport
 Yes No Yes No Yes Buggy Yes No Yes No Yes No Yes No 
<meta name="viewport" content="width = 380">
<meta name="viewport" content="width = device-width">
  • Opera Mobile 10.10 does not allow any zooming in pages with a <meta viewport>.
Local storage
 No n/a Yes No Yes n/a Yes No ? n/a
  • Android from 2.0 on
  • Safari from 3.x on
Property Opera Mobile Opera Mini iPhone Android Symbian S40 Dolfin BlackBerry Palm Phantom Obigo Bolt Firefox MicroB IE Mobile BlackBerry old NetFront Obigo UCWeb
Presto WebKit Gecko
Appcache

You can’t do this test yourself.

 No n/a Yes No Yes To be tested n/a Yes No No n/a
  • Android from 2.0 on
SVG

External test. Pure SVG file; should be shown in the browser and not downloaded.

 Yes Yes No Ext Ext Yes No To be tested No Buggy Yes No
Ext
External SVG player.
  • Interaction painfully slow or non-existent on S40.
  • Not zoomable in Dolfin.
Flash

External test on Adobe’s product page. Click the link in the Flash movie; the next page should also load correctly.

 No No Yes Partial No Yes To be tested No No No
  • Only in Symbian WebKit 3 (N8), and even there it doesn’t load the second example.
Canvas
 Yes Yes To be tested Yes To be tested Yes To be tested Yes To be tested To be tested To be tested To be tested No Yes
Property Opera Mobile Opera Mini iPhone Android Symbian S40 Dolfin BlackBerry Palm Phantom Obigo Bolt Firefox MicroB IE Mobile BlackBerry old NetFront Obigo UCWeb
Presto WebKit Gecko